<template>
    <div class="tech-special-list shop-tabbar-container" ref="menuList">
        <div class="menu-list-container">
            <!-- 左侧菜单 -->
            <div :class="`goods-type-container ${isFixed ? 'is-fixed' : ''}`">
                <BadgeGroup :active-key="categoryIndex">
                    <div v-for="(item, index) in categoryList" :key="item.id">
                        <Badge class="goods-type-list" :title="item.name" @click="changeCategory(index)" />
                    </div>
                </BadgeGroup>
            </div>
            <!-- 右侧菜品列表 -->
            <div class="goods-container">
                <Row class="content" gutter="16" v-if="shelfList.length > 0">
                    <Col span="12" v-for="(item, index) in shelfList" :key="index">
                        <GoodsListItem :itemInfo="item" @addToBag="addToBag" :isBrand="isBrand" />
                    </Col>
                </Row>
            </div>
        </div>
        <ChooseGoods
            v-if="goodsDetail"
            ref="choose"
            :info="goodsDetail"
            :isOnlySelect="false"
            :isChangeSku="false"
            :isAddBag="true"
            :isNowBuy="false"
            :mode="mode"
            :styleMode="styleMode"
            :theme="theme"
            @ensure="ensureChoose"
        />
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Badge, BadgeGroup, Row, Col } from 'vant';
import GoodsListItem from '../components/GoodsListItem';
import ChooseGoods from '../components/ChooseGoods';

import '@styles/shop/tabbar';
import ModeMixin from '@common/mixin';
import { TipSuccess } from '@common/tip';
import logger from '@common/logger';
import EventBus from '@common/eventBus';

export default {
    name: 'SpecialList', // 列表
    mixins: [ModeMixin],
    components: {
        Badge,
        BadgeGroup,
        Row,
        Col,
        GoodsListItem,
        ChooseGoods,
    },
    props: {
        isFixed: {
            type: Boolean,
            default: false,
        },
        isBrand: {
            type: Boolean,
            default: true,
        },
    },
    computed: {
        ...mapState({
            categoryList: state => state.special.categoryList,
            shelfList: state => state.special.shelfList,
            storeInfo: state => state.special.storeInfo,


            specialShopInfo: state => state.shopSpecial.specialShopInfo,
            specialGroups: state => state.shopSpecial.specialGroups,
            specialShelfData: state => state.shopSpecial.specialShelfData,
        }),
    },
    data() {
        return {
            categoryIndex: 0,
            goodsDetail: null,
        };
    },
    methods: {
        ...mapActions([
            'getStoreShelf',

            'getSpecialShelfData',
            'getGoodsAllInfo',
            'addShopBagItem',
        ]),
        // 分组点击
        async changeCategory (index) {
            this.categoryIndex = index;
            const categoryId = this.categoryList[index].id;
            await this.getStoreShelf(categoryId);
            // 重置位置
            document.querySelector('.tech-special').scrollTop = document.querySelector('.special-top-container').offsetHeight;
        },
        async addToBag(item) {
            logger.success('SpecialTabList => 获取的商品详情为：', item);
            this.goodsDetail = item;
            setTimeout(() => {
                this.$refs.choose.show();
            }, 50);
        },
        async ensureChoose(skuInfo) {
            logger.info('SpecialTabList => 选择的商品规格为', skuInfo);
            const item = {
                prod_id: this.goodsDetail.id,
                sku_id: skuInfo.id,
                quantity: skuInfo.quantity,
                store_id: this.storeInfo.id,
                store_name: this.storeInfo.name,
            };
            const flag = await this.addShopBagItem(item);
            if (flag) {
                TipSuccess('加入购物车成功');
                EventBus.$emit('RefreshBagData');
            }
        },
    },
};
</script>

<style lang="less">
.tech-special-list {
    min-width: 50vh;
}
</style>
